<template>
  <div class="bigimg">
    <img :src="pic" alt="" />
    <h1>404--页面失踪了</h1>
    <van-circle 
    class="dao"
      v-model="currentRate"
      :rate="100"
      :speed="10"
      :text="text"
      layer-color="#ebedf0"
      :stroke-width="60"
      size="200px"
      color="#adf"
    />
  </div>
</template>
<script>
import pic from "@/staic/img/404.gif";
export default {
  data() {
    return {
      pic,
      currentRate: 0,
    };
  },
  computed: {
    text() {
      return "倒计时" + (10 - Math.floor(this.currentRate / 10)) + "s"+'返回首页';
    },
  },
      watch: {
        currentRate(v){
            if(v==100){
                this.$router.push({name:'home'})
            }
        }
  }
};
</script>

<style lang="scss" scoped>
.bigimg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  img {
    margin: auto;
    width: 300px;
    height: 300px;
  }
  .dao{
      font-size: 50px;
  }
}
</style>
